<template>
  <div class="page">

    <el-form ref="addForm" :model="addForm" :rules="addFormRules" class="form_box" label-width="120px">
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="手机：" prop="phone">
        <el-input v-model="addForm.phone" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="微信号：">
        <el-input v-model="addForm.wxAccount"></el-input>
      </el-form-item>
      <el-form-item label="是否加微信：">
        <el-radio-group v-model="addForm.wxAdd">
          <el-radio label="是">是</el-radio>
          <el-radio label="否">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="性别：" prop="gender">
        <el-radio-group v-model="addForm.gender">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
          <el-radio label="未知">未知</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄：" prop="age">
        <el-input v-model.number="addForm.age" maxlength="2"></el-input>
      </el-form-item>
      <el-form-item label="城市：" prop="city">
        <el-select v-model="addForm.city" filterable>
          <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在位置：">
        <el-input v-model="addForm.address"></el-input>
      </el-form-item>
      <el-form-item label="报名项目：" prop="enrollProject">
        <el-select v-model="addForm.enrollProject" filterable multiple>
          <el-option v-for="(item,index) in projectList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报名费：" prop="enrollFee">
        <el-input v-model.number="addForm.enrollFee"><template slot="append">元</template></el-input>
      </el-form-item>
      <el-form-item label="报名时间：" prop="enrollTime">
        <el-date-picker v-model="addForm.enrollTime" type="datetime" placeholder="选择报名时间" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="负责人：" prop="principal">
        <el-select v-model="addForm.principal" filterable multiple multiple-limit="3">
          <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <!-- <user-select v-model="addForm.principal"></user-select> -->
      </el-form-item>
      <el-form-item label="广告来源：" prop="channelSource">
        <el-select v-model="addForm.channelSource" filterable @change="getAdCodeList">
          <el-option v-for="(item,index) in sourceList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="广告代号：">
        <el-select v-model="addForm.adSource " filterable>
          <el-option v-for="(item,index) in adCodeList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="信息收集：">
        <el-input type="textarea" v-model="addForm.collectInfo"></el-input>
      </el-form-item>
      <el-form-item label="更多备注：">
        <el-input type="textarea" v-model="addForm.remark"></el-input>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import {
  ADDCUSTOMERINFO,
  GETCUSTOMERINFO,
  EDITCUSTOMERINFO,
} from "@/http/customer";
import { Validator } from "@/common/validator";
import {
  GETPROJECTOPTIONS,
  GETCITYOPTIONS,
  GETADSOURCEOPTIONS,
  GETCHANNELSOURCEOPTIONS,
  GETUSEROPTIONS,
} from "@/http/system";
import { getStorage, deepClone, showToast } from "@/common/util";
import moment from "moment";
export default {
  name: "AddCustomer",
  props: {
    id: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      addForm: { gender: "男", enrollProject: [], principal: [] },
      addFormRules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        city: [{ required: true, message: "请选择城市", trigger: "change" }],
        enrollProject: [
          { required: true, message: "请选择报名项目", trigger: "change" },
        ],
        enrollFee: [
          { required: true, message: "请输入报名费", trigger: "blur" },
          { type: "number", message: "报名费必须为数字", trigger: "blur" },
        ],
        enrollTime: [
          { required: true, message: "请选择报名时间", trigger: "change" },
        ],
        principal: [
          { required: true, message: "请选择负责人", trigger: "change" },
        ],
        channelSource: [
          { required: true, message: "请选择广告来源", trigger: "change" },
        ],
        age: [{ type: "number", message: "年龄必须为数字", trigger: "blur" }],
        phone: [
          {
            pattern: Validator.PHONEREG,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
      projectList: [],
      cityList: [],
      sourceList: [],
      adCodeList: [],
      userList: [],
      user: {},
    };
  },
  mounted() {
    console.log(this.id);
    let _time = moment().format("yyyy-MM-DD HH:mm:ss");
    this.user = getStorage("user");
    this.$set(this.addForm, "principal", [this.user.id]);
    this.$set(this.addForm, "enrollTime", _time);
    this.$set(this.addForm, "enrollFee", 0);
    this.getProject();
    this.getCity();
    this.getSource();
    this.getUser();

    // 获取客户详情
    if (this.id) {
      this.getInfo();
    }
  },
  methods: {
    // 保存客户信息
    saveInfo() {
      let _this = this;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          _this.$emit("change");
          return false;
        }

        let oParams = deepClone(_this.addForm);
        let o = _this.cityList.find((k) => k.code == oParams.city);
        oParams.cityName = o ? o.name : "";
        oParams.enrollProject = oParams.enrollProject.toString();
        oParams.principal = oParams.principal.toString();

        // 编辑客户
        if (_this.id) {
          console.log(oParams);
          EDITCUSTOMERINFO(oParams).then((res) => {
            if (res.code != 200) {
              _this.$emit("change");
              return false;
            }
            showToast({
              message: "修改成功",
              type: "success",
            });
            _this.$emit("change", true);
          });
          return false;
        }

        //_this.$emit("change");
        ADDCUSTOMERINFO(oParams).then((res) => {
          if (res.code != 200) {
            _this.$emit("change");
            return false;
          }
          showToast({
            message: "新增成功",
            type: "success",
          });
          _this.$emit("change", true);
        });
      });
    },

    // 获取所有项目
    getProject() {
      GETPROJECTOPTIONS().then((res) => {
        this.projectList = res.data || [];
      });
    },

    // 获取所有城市
    getCity() {
      GETCITYOPTIONS().then((res) => {
        this.cityList = res.data || [];
      });
    },

    // 获取所有广告来源
    getSource() {
      GETCHANNELSOURCEOPTIONS().then((res) => {
        this.sourceList = res.data || [];
      });
    },

    // 获取广告代号
    getAdCodeList(id) {
      if (this.addForm.adSource) {
        delete this.addForm.adSource;
      }
      GETADSOURCEOPTIONS({ channelSource: id }).then((res) => {
        this.adCodeList = res.data || [];
      });
    },

    // 获取负责人列表
    getUser(name) {
      GETUSEROPTIONS({ username: name }).then((res) => {
        this.userList = res.data || [];
      });
    },

    // 获取客户详情
    getInfo() {
      let oParams = {};
      oParams.id = this.id;
      GETCUSTOMERINFO(oParams).then((res) => {
        let obj = res.data || {};
        let m = obj.baseInfo || {};
        let o = {};
        o.id = m.id;
        o.name = m.name;
        o.phone = m.phone;
        o.wxAccount = m.wxAccount;
        o.wxAdd = m.wxAdd;
        o.gender = m.gender;
        o.age = m.age;
        o.city = m.city;
        o.address = m.address;
        //o.enrollProject = m.enrollProjectIds?m.enrollProjectIds.split(','):[]
        o.enrollFee = m.enrollFee;
        o.enrollTime = m.enrollTime;
        //o.principal = m.principalIds?m.principalIds.split(','):[]
        o.channelSource = m.channelSource;
        o.adSource = m.adSource;
        o.collectInfo = m.collectInfo;
        o.remark = m.remark;

        // 设置报名项目
        if (m.enrollProjectIds) {
          let arr = [];
          m.enrollProjectIds.split(",").map((k) => {
            arr.push(Number(k));
          });
          o.enrollProject = arr;
        }

        // 设置负责人
        if (m.principalIds) {
          let arr = [];
          m.principalIds.split(",").map((k) => {
            arr.push(Number(k));
          });
          o.principal = arr;
        }

        if (o.channelSource) {
          this.getAdCodeList(o.channelSource);
        }
        this.addForm = o;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.form_box {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    flex: 0 0 50%;
    .el-select,
    .el-date-editor {
      width: 100%;
    }
  }
}
</style>